<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="12">
        <a-card>
          <div class="card-header"><span class="border"></span>交易信息</div>
          <div class="card-body">
            <transaction-detail :tradeInfos="tradeInfo"></transaction-detail>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <div class="card-header"><span class="border"></span>收件地址</div>
          <div class="card-body">
            <a-row>
                <a-col :span="8"> <label>收货人：</label><span>{{buyInfo.receiverName}}</span> </a-col> 
                <a-col :span="8"> <label>电话：</label><span><j-ellipsis :value="buyInfo.receiverPhone" :length="15"></j-ellipsis> </span></a-col> 
                <a-col :span="8"> <label>州、地区：</label><span>{{buyInfo.receiverRegion}}</span></a-col>
                <a-col :span="8"> <label>城市：</label><span>{{buyInfo.receiverCity}}</span></a-col>
                <a-col :span="8"> <label>县：</label><span>{{buyInfo.receiverCounty}}</span></a-col>
                <a-col :span="8"> <label>街道名称：</label><span>{{buyInfo.streetName}}</span></a-col>
                <a-col :span="8"> <label>街道号码：</label><span>{{buyInfo.streetNumber}}</span></a-col>
                <a-col :span="8"> <label>单元号：</label><span>{{buyInfo.complementNumber}}</span></a-col>
                <a-col :span="8"> <label>邻里：</label><span>{{buyInfo.neighborhood}}</span></a-col>
                <a-col :span="8"> <label>地址：</label>
                  <span>{{buyInfo.receiverAddress1}}</span>
                  <span v-if="buyInfo.receiverAddress2"> - {{buyInfo.receiverAddress2}} </span>
                  <span v-if="buyInfo.receiverAddress3"> - {{buyInfo.receiverAddress3}} </span>
                </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import JEllipsis from '../../../../../components/jeecg/JEllipsis.vue'
import transactionDetail from './transactionDetail.vue'
export default {
  name: 'transactionInfo',   //交易信息
  components:{transactionDetail, JEllipsis},
  props:{
    tradeInfo:{
      type:Object,
      default:()=>{}
    },
    buyInfo:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {}
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-col {
  margin-bottom: 6px;
  label {
    color: rgba(0, 0, 0, 0.85);
  }
  span {
    color: rgba(0, 0, 0, 0.65);
  }
}
/deep/.ant-card {
  min-height: 350px;
  box-shadow: 0 0 3px 3px #E5E5E5;
  .ant-card-body {
    padding: 10px 0;
  }
}
.card-header {
  font-size: 16px;
  margin-bottom: 10px;
  .border{
    padding: 4px 2px;
    background: #1890ff;
    margin-right: 6px;
  }
}
.card-body {
  padding: 0 15px;
  span {
    margin-right: 6px;
  }
}
</style>